<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Homepage</title>
<link rel='stylesheet' href='resources/css/style.css' type='text/css' media='all' />
<link rel='stylesheet' href='resources/css/grid.css' type='text/css' media='all' />
<script type="text/javascript" src="resources/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="resources/compiled/js/blocksit.js"></script>
<script>
	$(document).ready(function() {
		//vendor script
		$('#header').css({
			'top' : -50
		}).delay(1000).animate({
			'top' : 0
		}, 800);

		$('#footer').css({
			'bottom' : -15
		}).delay(1000).animate({
			'bottom' : 0
		}, 800);

		//blocksit define
		$(window).load(function() {
			$('#container').BlocksIt({
				numOfCol : 4,
				offsetX : 8,
				offsetY : 8
			});
		});

		//window resize
		var currentWidth = 1100;
		$(window).resize(function() {
			var winWidth = $(window).width();
			var conWidth;
			if (winWidth < 660) {
				conWidth = 440;
				col = 2
			} else if (winWidth < 880) {
				conWidth = 660;
				col = 3
			} else if (winWidth < 1100) {
				conWidth = 880;
				col = 4;
			} else {
				conWidth = 1100;
				col = 5;
			}

			if (conWidth != currentWidth) {
				currentWidth = conWidth;
				$('#container').width(conWidth);
				$('#container').BlocksIt({
					numOfCol : col,
					offsetX : 8,
					offsetY : 8
				});
			}
		});
		
		$.getJSON('services/manager/pictures', function(data) {
			$.each(data.galeries, function(key, val) {
				$("#container")
					.append("<div class=\"grid block\"><div class=\"imgholder\"><img src=\""+
							val.url+"\" /></div><strong>"+val.title+"</strong><p>"+
							val.description+"</p><div class=\"meta\">"+val.creator+"</div>");
			});
		});
		
		$('#search').keypress(function(event){
			var keycode = (event.keyCode ? event.keyCode : event.which);
			var id = document.getElementById("searching").value;
			if(keycode == '13'){
				$.getJSON('services/manager/friendProfile/'+id, function(detail) {
					if (detail.emailAddress === null) {
						alert("User tidak ditemukan.");
					} else {
						alert(detail.emailAddress);
					}
				});
			}
		});
		
	});
</script>
</head>
<body>

	<!-- Content -->
	<section id="wrapper">
		<!-- Header -->

		<header id="header">
			<div id="logo">
				<h4>Babytivities</h4>
			</div>
			<div id="backlinks">
			<div id="search">
				<input type="text" id="searching" name="searching" placeholder="search peoples here"/>
			</div>
				<ul>
					<li><a href="home.html">Home</a></li>
					<li><a href="scrap.html">Scrap</a></li>
					<li><a href="message.html">Message</a></li>
					<li><a href="gallery.html">Gallery</a></li>
					<li><a href="profile.html">Profile</a></li>
				</ul>
			</div>
		</header>
		<div class="clearfix">&nbsp;</div>

		<div id="main_wrap" class="container_12">
			<div id="container" class="grid_8">
			
			</div>
			<div class="grid_4 ">
				<div id="wrap_sidebar">
					<h3>Tips untuk mama</h3>
					<ul>
						<li>
							<p><strong>1. Perut ke perut</strong></p>
							<p><img src="resources/image/tummy_to_tummy.jpg" /></p>
							<p>Berbaringlah di lantai atau di tempat tidur, datar atau di atas bantal. Tempatkan bayi anda di dada atau di perut, sehingga Anda bertatap muka dengan bayi anda. Selalu pegang yang kuat untuk keselamatan.</p>
						</li>
						<li>
							<p><strong>2.kontak mata dan senyum</strong></p>
							<p><img src="resources/image/eye_level_smile.jpg" /></p>
							<p>Sejajarkan tubuh anda dengan bayi Anda untuk terjadi kontak mata. Gulung dan tempatkan selimut di bawah dada dan diatas lengan untuk dukungan tambahan.</p>
						</li>
						<li>
							<p><strong>3. Pangkuan yg nyaman</strong></p>
							<p><img src="resources/image/lap_soothe.jpg" /></p>
							<p>Tempatkan bayi tertelungkup di pangkuan Anda untuk bersendawa atau menenangkan dia. Sebuah tangan di bagian bawah bayi Anda akan membantu menstabilkan dan menenangkan bayi anda.</p>
						</li>
						<li>
							<p><strong>4. Pegang bawah perut</strong></p>
							<p><img src="resources/image/tummy_down_carry.jpg" /></p>
							<p>Geser satu tangan di bawah perut dan di antara kaki ketika memegang bawah perut bayi. dekatkan bayi ke tubuh Anda</p>
						</li>
						<li>
							<p><strong>5. Saat untuk berperut</strong></p>
							<p><img src="resources/image/tummy_minute.jpg" /></p>
							<p>Tempatkan bayi pada perutnya untuk satu atau dua menit setiap kali Anda merubah posisi bayi anda. Mulai beberapa menit pada suatu waktu dan coba untuk melakukan itu sampai satu jam per hari dalam interval yang lebih pendek pada tiga bulan terakhir</p>
						</li>
					</ul>
				</div>
				<div id="wrap_sidebar">
					<p>Pada bulan ke-6, bayi Anda telah belajar begitu banyak hal yang baru! Jika bayi Anda tidak memenuhi daftar kebiasaan yang tercantum di bawah ini, jangan tunda, pastikan untuk menghubungi dokter anda untuk memeriksa kesehatan buah hati Anda.</p>
					<br />
					<ul>
						<li>
							<input type="checkbox" name="cl1">Bayi mulai menggunakan suara konsonan dalam mengoceh seperti "baba" atau "papa".
						</li>
						<li>
							<input type="checkbox" name="cl2">Bayi telah dapat berbaring telentang sambil mengirimkan mainan dari satu tangan ke tangan yang lain.
						</li>
						<li>
							<input type="checkbox" name="cl3">Capai dengan kedua tangan untuk bermain dengan kaki
						</li>
						<li>
							<input type="checkbox" name="cl4">Mengoceh untuk mendapatkan perhatian
						</li>
						<li>
							<input type="checkbox" name="cl5">Dimulai sereal makan dan makanan bubur
						</li>
						<li>
							<input type="checkbox" name="cl6">Meraih mainan terdekat sementara di perut
						</li>
						<li>
							<input type="checkbox" name="cl7">Menggunakan tangan untuk mendukung diri dalam duduk
						</li>
						<li>
							<input type="checkbox" name="cl8">Rolls dari belakang ke perut
						</li>
						<li>
							<input type="checkbox" name="cl9">Menerima seluruh berat dengan kaki sambil berdiri dengan dukungan
						</li>
					</ul>
				</div>
			</div>
		</div>

	</section>

	<!-- Footer -->
	<footer id="footer">
		<span>&copy; 2012 <a href="#">babytivities</a></span>
	</footer>

</body>
</html>